<template>
  <scroll-view scroll-x class='tabItemDivAll' :scroll-into-view="toviewtype">
  <!-- <scroll-view scroll-x class='tabItemDivAll' scroll-with-animation="true"> -->
    <div class="tab" 
    v-for="(item,index) in items" 
    :key="index" 
    :class="{'active': isSelect === item.id}" 
    @click="isItemSelected(item.id,index,item.name)">
      <div :id="'view'+index">
        <div  v-if="item.name === '尾货'">
          <img src="/static/images/goods/tabimg.png" class="lastgodsimg" v-if="isShowImg">
          <img src="/static/images/goods/tabimgclick.png" class="lastgodsimg" v-else>
        </div>
        <div v-else>{{item.name}}</div>
      </div>
    </div>
  </scroll-view>
</template>

<script>
  export default {
    data(){
      return{
        selectId: 0,
        toviewtype: '',
        isShowImg: true
      }
    },
    props: {
      items: {
        type: Array,
      },
      selectIds: {
        type: Number,
        default: 0,
      },
    },
    mounted() {
      this.selectId = this.selectIds
    },
    computed: {
      isSelect () {
        return this.selectId
      }
    },
    methods: {
      isItemSelected(id,index,name) {
        if(name == "尾货"){
          this.isShowImg = false
        }else{
          this.isShowImg = true
        }
        let indexnum = parseInt(index)-1  
        this.toviewtype = 'view'+ indexnum 
        this.$emit("clickId",id) 
        this.selectId = id
      },
    }
  }
</script>

<style scoped>
  scroll-view{
    width: 100%;
    padding:0 10rpx;
    white-space: nowrap;
  }
  img{
    width: 100%;
    height: 100%;
    display: block;
  }
  .tabItemDivAll{
    height: 88rpx;
    white-space: nowrap;
    overflow: hidden;
  }
  .tabItemDivAll .tab {
    display: inline-block;
    height: 88rpx;
    color: #b1b1b1;
    font-size: 28rpx;
    position: relative;
    text-align: center;
    margin-right: 8rpx;
    width: 130rpx;
    min-width: 130rpx;
  }
  .tabItemDivAll .tab.active{
    color: #000;
  }
  .tabItemDivAll .tab>div{
    height: 58rpx;
    line-height: 58rpx;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  .lastgodsimg{
    width: 130rpx;
    height: 58rpx;
    margin-top: -6rpx;
  }
</style>